import React, { Component } from 'react'

export default class Order extends Component {
  constructor() {
    super()
    this.state = {
      myList: [
        {name: 'apple'},
        {name: 'banana'},
        {name: 'pear'}
      ]
    }
  }
  render() {
    // let { list, addOrder, delOrder } = this.props  // 这是老的写法，需要逐个添加
    // 一下是新的
    let {
      list,
      orderAction: {addOrder, delOrder}
    } = this.props
    return (
      <div>
        <p>我是Order，我是UI型组件</p>
        <ul>
          {
            this.state.myList.map((item, index) => {
              return (
                <li key={index}>
                  <span>{item.name}</span>
                  <button onClick={()=>addOrder({order: item})}>新增订单</button>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        <p>现有订单：</p>
        <ul>
          {
            list.map((item, index) => {
              return (
                <li key={index}>
                  <span>{item.name}</span>
                  <button onClick={()=>delOrder(index)}>删除订单</button>
                </li>
              )
            })
          }
        </ul>

      </div>
    )
  }
}
